<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/11/21
  Time: 21:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <title>My JSP 'index.jsp' starting page</title>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

    <script type="text/javascript">

        function suggest(){
            document.getElementById("username");
        }
        function checkUserName(){
            var username=document.getElementById("username").value
            var message=document.getElementById("message")
            if(username.trim().length<=2||username.trim().length>18){
                message.innerHTML="<font color='red'>用户名称只能是3-18位</font>";
                return false;
            }else{
                message.innerHTML="<font color='green'>√</font>";
                return true;
            }
        }

        function checkPassword(){
            var password1=document.getElementById("password1").value
            var pass1=document.getElementById("pass1")
            if(password1.trim().length<3||password1.trim().length>18){
                pass1.innerHTML="<font color='red'>用户口令只能是3-18位</font>";
                return false;
            }else{
                pass1.innerHTML="<font color='green'>√</font>";
                return true;
            }

        }

        function checkPassword2(){
            var password1=document.getElementById("password1").value
            var password2=document.getElementById("password2").value
            var pass2=document.getElementById("pass2")
            if(password1!=password2){
                pass2.innerHTML="<font color='red'>两次输入密码不一致</font>";
                return false;
            }else{
                pass2.innerHTML="<font color='green'>√</font>";
                return true;
            }

        }


        function checkAge(){
            var age=document.getElementById("age").value
            var age2=document.getElementById("age2")
            if(isNaN(age)){
                age2.innerHTML="<font color='red'>年龄只能是数字</font>";
                return false;
            }else{
                if(age<18||age>60){
                    age2.innerHTML="<font color='red'>年龄只能18-60岁之间</font>";
                    return false;
                }else{
                    age2.innerHTML="<font color='green'>√</font>";
                    return true;
                }
            }
        }

        function checkEmail() {
            var email=document.getElementById("email").value;
            var email2=document.getElementById("email2");
            var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
            if(reg.test(email)){
                email2.innerHTML="<font color='green'>√</font>";
                return true;
            }else{
                email2.innerHTML="<font color='red'>邮箱地址不正确，例如：1106647746@qq.com</font>";
                return false;
            }

        }


        function selectAll(){
            if(checkUserName()&&checkPassword()&&checkPassword2()&&checkAge()&&checkEmail()){
                return true;
            }else{
                return false;
            }
        }
    </script>
</head>
<body>
<center>
<fieldset style="width: 420px" style="color: #B5E9FC" style="height: 888px">
    <legend style="margin-left: 10px;"> 注册信息</legend>
    <form action="regist" method="post" onsubmit="return selectAll()">
        用户姓名：<input  name="user" placeholder="请认真填写" id="username" onblur="checkUserName()" onfocus="suggest()"><span id="message"></span></br>
        用户密码：<input name="password" placeholder="请认真填写" type="password" id="password1" onblur="checkPassword()"><span id="pass1"></span></br>
        确认密码：<input name="password1" type="password" id="password2" onblur="checkPassword2()"><span id="pass2"></span></br>
        用户性别：男<input name="sex" type="radio" checked name="sex" value="nan">女<input type="radio" name="sex" value="nv"></br>
        用户年龄：<input name="age" id="age" onblur="checkAge()"><span id="age2"></span></br>
        用户邮箱：<input name="emial" id="email" onblur="checkEmail()"><span id="email2"></span></br>
        兴趣爱好：<input name="hobby" type="checkbox" value="lanqiu">篮球<input name="hobby" type="checkbox" value="paiqiu">排球<input name="hobby" type="checkbox" value="zuqiu">足球</br>
        简个人介：<textarea name="jianjie" rows="5" cols="18"></textarea></br>
        <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="取消">
    </form>
</fieldset>
</center>
</body>
</html>

